<!DOCTYPE html>
<!--<html lang="en">-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Search</title>
    <link rel="stylesheet" type="text/css" href="css/search.css" th:href="@{/css/search.css}"/>
    <!--    <head th:include="fragments/header">-->
</head>

<body>
<!--<div th:include="fragments/header"></div>-->
<div id="app">
    <div id="searchResultDiv">

        <div class="search-box">
            <!--        <ul>-->
            <!--            <li><a href="javascript:void(0)" class="shbtnOn"><span>快速检索</span></a></li>-->
            <!--            <li><a href="/LawMultiSearch/Advanced?type=0">高级检索</a></li>-->
            <!--        </ul>-->
            <!--        <img src="/images/img.png" th:src="@{/images/img.png}">-->
            <!--        <div th:background="@{/images/img.png}"></div>-->

            <div class="clearfix">
                <form id="formSearch">
                    <select id="searchField" name="searchField" class="sf_inputsh01">
                        <option value="案例全文" selected="selected=selected">案例全文</option>
                        <option value="题名" selected="">案例标题</option>
                        <option value="关键词" selected="">检索主题词</option>
                        <option value="作者单位" selected="">报送单位</option>
                    </select>
                    <input class="sf_input" id="keywords" maxlength="50" name="keywords" type="text" v-model="keyword">
                    <input type="hidden" id="checkDatabaseID" name="checkDatabaseID" value="">
                    <input type="hidden" id="pageIndexNow" name="pageIndexNow" value="1">
                    <input type="hidden" id="pageSizeNow" name="pageSizeNow" value="10">
                    <input type="hidden" id="sortField" name="sortField" value="">
                    <input type="hidden" id="sortDescAsc" name="sortDescAsc" value="">
                    <input type="hidden" id="listOrabst" name="listOrabst" value="">
                    <input type="hidden" id="classCode" name="classCode" value="">
                    <input type="hidden" id="fieldName" name="fieldName" value="关键词">
                    <input type="hidden" id="fieldValue" name="fieldValue" value="">
                    <input type="hidden" id="currentSubid" name="currentSubid" value="0">
                    <input type="hidden" id="caseTimeValue" name="caseTimeValue" value="">
                    <input type="hidden" id="businessTypeName" name="businessTypeName" value="">
                    <input type="hidden" id="areaName" name="areaName" value="">
                    <input type="hidden" id="Type" name="Type" value="0">
                    <input type="hidden" id="ParentDbId" name="ParentDbId" value="">
                </form>
                <input id="submitButton" value="检 索" type="button" class="js_button" @click="searchKey()">

            </div>
            <div id="dbList" class="talkDiv talkW-674" style="top: 420px;background-color: #fff;display: none">
                <div class="talkDiv-title">
                    <a style="margin-top: -10px" class="icon icon-close" title="关闭" href="javascript:void(0);">x</a>
                </div>
                <div id="loadingimage" style="display: none; margin-top: 25px; margin-left: 300px; position: absolute">
                    <!--  <img src="/Images/loading.gif" width="50">-->
                </div>
                <div class="talkDiv-body">
                    <ul>


                    </ul>
                </div>
                <div class="talkDiv-btn">
                    <a href="javascript:void(0);" class="btn btn-m btn-submit btn-warn-f select-all">全选</a>
                    　<a href="javascript:void(0);" class="btn btn-m btn-submit btn-prim-f cancel">取消</a>
                </div>
            </div>
            <div class="hotseach">
                <span style="float: left;">热门检索词：</span>
                <span><a class="hotwordsbtn" title="戒毒" data-hotword="戒毒" href="javascript:void(0);">戒毒</a></span>
                <span><a class="hotwordsbtn" title="案例" data-hotword="案例" href="jjavascript:void(0);">案例</a></span>
                <span><a class="hotwordsbtn" title="社区服刑人员" data-hotword="社区服刑人员"
                         href="javascript:void(0);">社区服刑人员</a></span>
                <span><a class="hotwordsbtn" title="司法行政戒毒" data-hotword="司法行政戒毒"
                         href="javascript:void(0);">司法行政戒毒</a></span>
                <span><a class="hotwordsbtn" title="监狱" data-hotword="监狱" href="javascript:void(0);">监狱</a></span>

            </div>

            <!-- 搜索 -->

        </div>

        <div class="sorttit">
            <div class="sorttitfl">
                <span class="sorttitfl01">排序：</span>

                <span style="background: #fd6e0f;color: #fff; height: 28px;line-height: 28px;display: block;  float: left;  padding: 0px 25px 0px 25px; border: 1px #d6d6d6 solid; margin-right: 5px;"
                      onclick="sortClick('desc','发表时间')">上线时间</span>
                <span class="height: 28px;line-height: 28px;  display: block;float: left; padding: 0px 25px 0px 25px;  border: 1px #d6d6d6 solid; margin-right: 5px;"
                    >访问量</span>

            </div>
            <div class="" style="float: left; margin-left: 20px;">
                <span>共找到{{total}}条结果</span>
                <span style="margin-left: 10px" >每页显示：</span>
                <span :class="[size==10 ? 'pageSize pageSizeCurrent' : 'pageSize']" @click="changePageSizeFun(10)">10</span>
                <span :class="[size==20 ? 'pageSize pageSizeCurrent' : 'pageSize']" @click="changePageSizeFun(20)">20</span>
                <span :class="[size==50 ? 'pageSize pageSizeCurrent' : 'pageSize']"@click="changePageSizeFun(50)">50</span>
            </div>
        </div>
        <div class="sortlist">
            <table width="100%" border="0">
                <thead>
                <tr class="sortlisttop">

                    <td style="text-align: center" width="40%">案例标题</td>
                    <td style="text-align: center" width="18%">案例编号</td>
                    <td style="text-align: center" width="11%">案例报送时间</td>
                    <td style="text-align: center">案例类型</td>
                    <td style="text-align: center" width="5%">访问量</td>

                </tr>
                </thead>
                <tbody v-for="(item,index)  in tableData" :key="index">
                <tr>
                    <td>

                        <a v-html="item.caseTittlDateUtilse" target="_blank" :href=item.caseUrl :title=item.caseUrl
                           style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;text-decoration: none;">
                      {{item.caseTittlDateUtilse}}
                        </a>
                    </td>
                    <td>{{item.number}}</td>
                    <td style="text-align: center">{{item.submissionTime}}</td>
                    <td class="tc">{{item.caseType}}</td>
                    <td style="text-align: center">{{item.visits}}</td>

                </tr>

                </tbody>
            </table>

        </div>

        <div class="pagenav">
            <a href="javascript:void(0);" class="pagenavon" onclick="searchPageNew('1')">1</a>
            <a href="javascript:void(0);" onclick="searchPageNew('2')">2</a>
            <a href="javascript:void(0);" onclick="searchPageNew('3')">3</a>
            <a href="javascript:void(0);" onclick="searchPageNew('4')">4</a>
            <a href="javascript:void(0);" onclick="searchPageNew('5')">5</a>
            <a href="javascript:void(0);" onclick="searchPageNew('6')">6</a>
            <i class="iconfont icon-dian2"></i>
            <a href="javascript:void(0);" onclick="searchPageNew('115')">115</a>
            <a href="javascript:void(0);" class="page-next" onclick="searchPageNew('2')">下一页</a>
        </div>

            <script type="text/javascript">
                $(function () {
                    $(".pageSize")
                        .click(function () {
                            $(".pageSize").css("color", "#108fdd"); //被点击之外的a标签颜色
                            $(this).css("color", "#f00"); //给点击的a标签加红色
                            $(this).addClass("pageSizeCurrent");
                            var pageSize = $(this).text();
                            $("#pageSizeNow").val(pageSize);
                            searchResult(1);
                        });
                });
            </script>
            <script src="/Scripts/jquery-1.9.1.min.js"></script>


    </div>
</div>

<div th:include="fragments/footer"></div>
<!--<div th:include="fragments/PageNavigator"></div>-->
<!--    前端使用Vue，实现前后端分离-->
<!--<a th:href="@{/users/form}" >创建用户</a>-->
<!--<link rel="stylesheet" type="text/css" href="css/base-css/header.css" th:href="@{/css/base-css/header.css}" />-->
<!--<script src="SysBasement.js" th:src="@{/js/axios.min.js}"></script>-->
<!--<script th:src="@{../static/js/axios.min.js}"></script>-->
<!--<script th:src="@{/js/vue.min.js}"></script>-->
<!--<script th:src="@{/resource/static/js/axios.js}"></script>-->
<!--<script th:src="@{/resource/static/js/vue.js}"></script>-->
<!--&lt;!&ndash;<script type="module" src="./indexes.js"></script>&ndash;&gt;  todo-->
<!--<script  type="text/javascript" src="/js/vue.js" th:src="@{/js/vue.js}"></script>-->
<!--<script   type="text/javascript"  src="/js/axios.js" th:src="@{/js/axios.js}"></script>-->

<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
<!--2>同步最新版本{不建议使用}-->
<!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->

<script>

    let app1 = new Vue({
        el: '#app',
        data() {
            return {
                page: 0,
                size: 10,
                total: '',
                tableData: [],
                keyword: '',
                sortOrder:'desc',
                sortBy: 'submissionTime'
            }
        },
        created() {
            this.getDataList()
            this.getTableColumns()
        },
        methods: {
            searchKey() {
                var self = this;
                console.log(self.keyword);
                axios.get('/zs/search/highLightMatch', {
                    params: {
                        "pages": self.page,
                        "size": self.size,
                        "keywords": self.keyword,
                        "sort":{
                            sortBy:"desc"
                        }
                    }
                }).then(function (res) {
                    console.log("返回结果==>", res);
                    self.tableData = res.data.data.dataList;
                    self.page=res.data.data.page;
                    self.size=res.data.data.size;
                    self.total=res.data.data.total;
                }).catch(function (error) {
                    console.log(error);
                });
            },
        searchPageNew(page) {
            this.page = page - 1;
            this.getDataList();
        }
        ,

        changePageSizeFun(size) {
            this.size = size;
            this.searchKey();
        },
            sortClick(a,b){
                this.size = size;
            },
            appGet() {
                // 1>get请求方式
                axios.get('请求地址', {
                    params: {
                        "参数名": "传递的参数"
                    }
                })
                    .then(function (res) {
                        console.log("返回结果==>", res);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            appPost() {
                // 2>post请求方式
                axios.post('请求地址', {
                    "参数名": "传递的参数",
                    "参数名": "传递的参数"
                })
                    .then(function (response) {
                        console.log("返回结果==>", res);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            see() {
                var self = this;
                $.get("/console/sp/get?phone=" + self.addFormData.phone, {}, function (res) {
                    if (res && res.status) {
                        let data = res.data;
                        self.addFormData.deductPointAlready = data.userRecord.deductPoint;
                        self.addFormData.accountBalance = self.moneyFenToYuan(data.userAccount.accountBalance);
                        self.addFormData.freezeMoney = self.moneyFenToYuan(data.userAccount.freezeMoney);
                    }
                })
            },
            decimal(value) {
                var value = value.toString();
                value = value.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
                value = value.replace(/^\./g, ""); //验证第一个字符是数字
                value = value.replace(/\.{2,}/g, "."); //只保留第一个, 清除多余的
                value = value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
                value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
                return value;
            }

            ,
            dealTimeStartDataChange(data) {
                this.dealTimeStart = data;
            }
            ,
            dealTimeEndDataChange(data) {
                this.dealTimeEnd = data;
            }
            ,
            add() {
                this.addFormData = {
                    deadLineTimeStamp: '',
                    phone: '',
                    deductPoint: 0,
                    deductPointAlready: 0,
                    accountBalance: 0,
                    freezeMoney: 0,
                    dealMeasure: '',
                    deadLineTime: '',
                    deductFee: 0,
                    reason: ''
                };
                this.myModal = 'true';
            }
            ,
            edit(row) {
                var self = this;
                $.get("/console/sp/get?sellerId=" + row.sellerId, {}, function (res) {
                    if (res && res.status) {
                        let data = res.data;
                        self.addFormData = {
                            id: row.id,
                            phone: row.other.phone,
                            deductPoint: row.deductPoint,
                            deductPointAlready: data.userRecord.deductPoint,
                            accountBalance: self.moneyFenToYuan(data.userAccount.accountBalance),
                            freezeMoney: self.moneyFenToYuan(data.userAccount.freezeMoney),
                            dealMeasure: row.dealMeasure,
                            deadLineTime: self.timeFormatter(row.deadLineTime),
                            deadLineTimeStamp: new Date(row.deadLineTime),
                            deductFee: self.moneyFenToYuan(row.deductFee),
                            reason: row.reason
                        };
                        self.myModal = 'true';
                    }
                })
            }
            ,
            ok() {
                var self = this;
                $.post("/console/sp/addAndEdit", this.addFormData, function (data) {
                    if (data && data.status) {
                        self.$Message.success('成功');
                        self.getDataList();
                    } else {
                        self.$Message.error(data.msg);
                    }
                });
            }
            ,
            getTableColumns() {
                let self = this;
                this.tableColumns = [
                    {
                        title: '创建时间',
                        key: 'createTime',
                        className: 'demo-table-info-column',
                        render: function (h, params) {
                            var row = params.row;
                            return h("div", self.timeFormatter(row.createTime))
                        }
                    },
                    {
                        title: '手机号',
                        key: '-',
                        className: 'demo-table-info-column',
                        render: function (h, params) {
                            var row = params.row;
                            return h("div", row.other.phone)
                        }
                    },
                    {
                        title: '处罚分类',
                        key: 'dealMeasure',
                        className: 'demo-table-info-column',
                        render: function (h, params) {
                            var row = params.row;
                            return h("div", getDealMeasure(row.dealMeasure))
                        }
                    },
                    {
                        title: '扣分',
                        key: 'deductPoint',
                        className: 'demo-table-info-column',
                        render: function (h, params) {
                            var row = params.row;
                            return h("div", row.deductPoint)
                        }
                    },
                    {
                        title: '状态',
                        key: 'deadLineTime',
                        className: 'demo-table-info-column',
                        render: function (h, params) {
                            var row = params.row;
                            var deadLineTime = row.deadLineTime;
                            if (deadLineTime > new Date()) {
                                return h("div", "已生效");
                            }
                            return h("div", "已过期");
                        }
                    },
                    {
                        title: '说明',
                        key: 'reason',
                        className: 'demo-table-info-column',
                        render: function (h, params) {
                            var row = params.row;
                            return h("div", row.reason)
                        }
                    },
                    {
                        title: '扣款',
                        key: 'deductFee',
                        className: 'demo-table-info-column',
                        render: function (h, params) {
                            var row = params.row;
                            return h("div", self.moneyFenToYuan(row.deductFee))
                        }
                    },
                    {
                        title: '操作人',
                        key: 'operatorName',
                        className: 'demo-table-info-column',
                        render: function (h, params) {
                            var row = params.row;
                            return h("div", row.operatorName)
                        }
                    },
                    {
                        title: '操作',
                        key: '-',
                        className: 'demo-table-info-column',
                        render: function (h, params) {
                            return h('div', [h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: function () {
                                        self.edit(params.row)
                                    }
                                }
                            }, '修改')])
                        }
                    }]
            }
            ,

            getDataList() {
                var self = this;
                $.get("/console/sp/getPage", {
                    page: self.page,
                    size: self.size,
                    phone: self.phone,
                    dealMeasure: self.dealMeasure,
                    dealTimeStart: self.dealTimeStart,
                    dealTimeEnd: self.dealTimeEnd,
                }, function (res) {
                    if (res.status) {
                        self.tableData = res.data.content;
                        self.totalElements = res.data.totalElements;
                        self.tableData = res.data.content;
                    } else {
                        self.$Message.error(res.msg)
                    }
                })
            }
            ,
            moneyFenToYuan(value, row, index) {
                return (value * 0.01).toFixed(2);
            }
            ,
            timeFormatter(value) {
                if (value == null || value == "") {
                    return "";
                }
                var date = new Date(value);
                return format = date.format("yyyy-MM-dd hh:mm:ss");
            }
        }
    })
</script>

</body>
</html>
